<template>
  <view class="order-details">
    <view class="" v-if="!loading">
      <!-- 订单状态 -->
      <view class="shipments" v-if="status.type === 0 || status.type === 9">
        <view class="shipments-1">{{ '订单待付款' }}</view>
        <view class="shipments-2">
          <u-count-down
            :time="countdownTime"
            format="DD:HH:mm:ss"
            autoStart
            millisecond
            @change="onChange"
            @finish="getDetail"
          >
            <view class="time">
              <!-- 	<text class="time__item">{{ timeData.days }}&nbsp;天</text>
   						<text class="time__item">{{ timeData.hours }}&nbsp;时</text> -->
              <text class="time__item" style="color: #FF5900"
                >{{ timeData.minutes }}&nbsp;分</text
              >
              <text class="time__item" style="color: #FF5900"
                >{{ timeData.seconds }}&nbsp;秒</text
              >
            </view>
          </u-count-down>
          <text style="margin-left: 8rpx">后订单自动取消</text>
        </view>
      </view>

      <view class="" v-if="status.type === 1">
        <!--  待核销  或者待发货-->
        <view
          class="header bg-color-red acea-row row-middle headerNew"
          :class="refundOrder ? 'on' : ''"
          v-if="status.type === 1"
        >
          <view class="data" :class="refundOrder ? 'on' : ''">
            <view class="state">{{
              orderInfo.shippingType === 2
                ? '订单待收货'
                : orderInfo._status._msg
            }}</view>
            <view class="stateTwo" v-if="orderInfo.shippingType === 2">{{
              '正在快马加鞭为您发货'
            }}</view>
            <view class="stateTwo" v-else>{{
              orderInfo.createTime || ''
            }}</view>
          </view>
        </view>
      </view>

      <view class="" v-if="status.type === 2">
        <!-- 待收货-->
        <view
          class="header bg-color-red acea-row row-middle headerNew"
          :class="refundOrder ? 'on' : ''"
          v-if="status.type === 1"
        >
          <view class="data" :class="refundOrder ? 'on' : ''">
            <view class="state">{{ '订单待收货' }}</view>
            <view class="stateTwo" v-if="orderInfo.shippingType === 2">{{
              '发货后20天自动确认收货'
            }}</view>
          </view>
        </view>
      </view>
      <view class="" v-if="status.type === -2">
        <!-- 待收货-->
        <view class="header bg-color-red acea-row row-middle headerNew">
          <view class="data">
            <view class="state">{{ '订单已退款' }}</view>
            <view class="stateTwo">{{ '' }}</view>
          </view>
        </view>
      </view>
      <template v-if="!refundOrder">
        <!-- <view class="nav">
   				<view class="navCon acea-row row-between-wrapper">
   					<view :class="{ on: status.type === 0 || status.type === 9 }">待付款</view>
   					<view :class="{ on: status.type === 1 }" v-if="orderInfo.shippingType === 2">待核销</view>
   					<view :class="{ on: status.type === 1 }" v-else>待发货</view>
   					<view :class="{ on: status.type === 2 }" v-if="orderInfo.shippingType === 1">待收货</view>
   					<view :class="{ on: status.type === 3 }">待评价</view>
   					<view :class="{ on: status.type === 4 }">已完成</view>
   				</view>
   				<view class="progress acea-row row-between-wrapper">
   					<view
   						class="iconfont"
   						:class="[status.type === 0 || status.type === 9 ? 'icon-webicon318' : 'icon-yuandianxiao', status.type >= 0 ? 'font-color-red' : '']"
   					></view>
   					<view
   						class="line"
   						:class="{
   							'bg-color-red': status.type > 0 && status.type != 9
   						}"
   					></view>
   					<view
   						class="iconfont"
   						:class="[status.type === 1 ? 'icon-webicon318' : 'icon-yuandianxiao', status.type >= 1 && status.type != 6 && status.type != 9 ? 'font-color-red' : '']"
   					></view>
   					<view
   						class="line"
   						:class="{
   							'bg-color-red': status.type > 1 && status.type != 6 && status.type != 9
   						}"
   						v-if="orderInfo.shippingType === 1"
   					></view>
   					<view
   						class="iconfont"
   						:class="[status.type === 2 ? 'icon-webicon318' : 'icon-yuandianxiao', status.type >= 2 && status.type != 6 && status.type != 9 ? 'font-color-red' : '']"
   						v-if="orderInfo.shippingType === 1"
   					></view>
   					<view
   						class="line"
   						:class="{
   							'bg-color-red': status.type > 2 && status.type != 6 && status.type != 9
   						}"
   					></view>
   					<view
   						class="iconfont"
   						:class="[status.type === 3 ? 'icon-webicon318' : 'icon-yuandianxiao', status.type >= 3 && status.type != 6 && status.type != 9 ? 'font-color-red' : '']"
   					></view>
   					<view
   						class="line"
   						:class="{
   							'bg-color-red': status.type > 3 && status.type != 6 && status.type != 9
   						}"
   					></view>
   					<view
   						class="iconfont"
   						:class="[status.type == 4 ? 'icon-webicon318' : 'icon-yuandianxiao', status.type >= 4 && status.type != 6 && status.type != 9 ? 'font-color-red' : '']"
   					></view>
   				</view>
   			</view> -->
        <div
          class="writeOff"
          v-if="orderInfo.shippingType === 2 && orderInfo.paid === 1"
        >
          <div class="title">核销信息</div>
          <div class="grayBg">
            <div class="pictrue"><img :src="orderInfo.code" /></div>
          </div>
          <div class="gear">
            <img :src="`${$VUE_APP_RESOURCES_URL}/images/writeOff.jpg`" />
          </div>
          <div class="num">{{ orderInfo.verifyCode }}</div>
          <div class="rules">
            <div class="item">
              <div class="rulesTitle acea-row row-middle">
                <span class="iconfont icon-shijian"></span>
                核销时间
              </div>
              <div class="info">
                每日：
                <span class="time">{{ system_store.dayTime }}</span>
              </div>
            </div>
            <div class="item">
              <div class="rulesTitle acea-row row-middle">
                <span class="iconfont icon-shuoming1"></span>
                使用说明
              </div>
              <div class="info">可将二维码出示给店员扫描或提供数字核销码</div>
            </div>
          </div>
        </div>
        <!-- 	<div class="map acea-row row-between-wrapper" v-if="orderInfo.shippingType === 2 && orderInfo.paid === 1">
   				<div>自提地址信息</div>
   				<div class="place cart-color acea-row row-center-wrapper" @click="showChang(orderInfo.systemStore)">
   					<span class="iconfont icon-weizhi"></span>
   					查看位置
   				</div>
   			</div> -->

        <!-- 地址 -->
        <view class="address" v-if="orderInfo.shippingType === 1">
          <view class="address-left"
            ><text class="theme address-icon iconfont icon-a-locationhl"></text
          ></view>
          <view class="address-right">
            <view class="name">
              <text class="realName">{{ orderInfo.realName }}</text>
              <text class="phone">{{ orderInfo.userPhone }}</text>
              <text
                @click="telPhone(orderInfo.userPhone)"
                class="iconfont icon-tonghua font-color-green"
              ></text>
            </view>
            <view>{{ orderInfo.userAddress }}</view>
          </view>
        </view>
        <div class="address" v-else>
          <div class="name">
            {{ system_store.name }}
            <span class="phone">{{ system_store.phone }}</span>
            <span
              @click="telPhone(system_store.phone)"
              class="iconfont icon-tonghua font-color-red"
              :href="'tel:' + system_store.phone"
            ></span>
          </div>
          <div>{{ system_store.address }}</div>
        </div>
        <!-- <view class="line" v-if="orderInfo.shippingType === 1"><image :src="`${$VUE_APP_RESOURCES_URL}/images/line.jpg`" /></view> -->
      </template>

      <OrderGoods
        :evaluate="status.type || 0"
        :isIntegral="isIntegral"
        :isShow="
          orderInfo.combinationId ||
          orderInfo.bargainId ||
          orderInfo.seckillId ||
          orderInfo.storeId
            ? false
            : true
        "
        :cartInfo="orderInfo.cartInfo || []"
      ></OrderGoods>

      <!-- 		<view class="wrapper">
   			<view class="item acea-row row-between">
   				<view>订单编号：</view>
   				<view class="conter acea-row row-middle row-right">
   					{{ orderInfo.orderId || '' }}

   					<text class="copy copy-data" @click="copyClipboard(orderInfo.orderId)">复制</text>

   				</view>
   			</view>
   			<view class="item acea-row row-between">
   				<view>下单时间：</view>
   				<view class="conter">{{ orderInfo.createTime || '' }}</view>
   			</view>
   			<view class="item acea-row row-between">
   				<view>订单类型：</view>
   				<view class="conter">{{ orderTypeName || '' }}</view>
   			</view>
   			<view class="item acea-row row-between">
   				<view>支付状态：</view>
   				<view class="conter">{{ orderInfo.paid ? '已支付' : '未支付' }}</view>
   			</view>
   			<view class="item acea-row row-between">
   				<view>支付方式：</view>
   				<view class="conter">{{ orderInfo._status._payType || '' }}</view>
   			</view>
   			<view class="item acea-row row-between" v-if="orderInfo.mark">
   				<view>买家留言：</view>
   				<view class="conter">{{ orderInfo.mark || '' }}</view>
   			</view>
   		</view> -->

      <!-- 付款信息  2023-03-20 -->
      <view class="payment">
        <view class="title">付款信息</view>
        <view class="payment-1">
          <view class="left">商品总额</view>
          <view class="right">
            <text>¥</text>
            <text>{{ orderInfo.totalPrice || 0 }}</text>
          </view>
        </view>
        <view class="payment-2">
          <view class="left">
            <view class="freight">
              <text>运</text>
              <text>费</text>
            </view>
            <view class="freightText"></view>
          </view>
          <view class="right">
            <text>¥</text>
            <text>{{ orderInfo.payPostage || 0 }}</text>
          </view>
        </view>
        <view class="payment-2" v-if="orderInfo.sameDayDeliverPrice">
          <view class="left">
            <view class="freight">
              <text>12小时内送达</text>
            </view>
            <view class="freightText"></view>
          </view>
          <view class="right">
            <text>¥</text>
            <text>{{ orderInfo.sameDayDeliverPrice || 0 }}</text>
          </view>
        </view>
        <view class="payment-2">
          <view class="left"><view class="freight">优惠合计</view></view>
          <view class="right">
            <text>¥</text>
            <text>{{ discounts() }}</text>
          </view>
        </view>
        <view class="payment-1">
          <view class="left">{{ !isIntegral ? '实付金额' : '实付积分' }}</view>
          <view class="right" v-if="!isIntegral">
            <text>¥</text>
            <text>{{ orderInfo.payPrice || 0 }}</text>
          </view>

          <view class="right" v-if="isIntegral">
            <text>{{ orderInfo.payIntegral || 0 }}积分</text>
          </view>
        </view>
      </view>

      <!-- 付款信息  2023-03-20 -->

      <!-- 订单信息 -->
      <view class="orderInfo">
        <view class="title">订单信息</view>
        <view class="info">
          <view class="left">订单编号</view>
          <view class="right">
            <text>{{ orderInfo.orderId }}</text>
            <text @click="copy(orderInfo.orderId)">复制</text>
          </view>
        </view>

        <view class="info">
          <view class="left">下单时间</view>
          <view class="right">{{ orderInfo.createTime }}</view>
        </view>

        <view class="info info-bottom" v-if="orderInfo.payTime">
          <view class="left">付款时间</view>
          <view class="right">{{ dataFormat(orderInfo.payTime) }}</view>
        </view>

        <!-- <view class="info info-bottom" v-if="">
   				<view class="left">发货时间</view>
   				<view class="right">{{  }}</view>
   			</view>
   			 -->
        <!-- 	<view class="info info-bottom" v-if="">
   				<view class="left">成交时间</view>
   				<view class="right">{{  }}</view>
   			</view> -->
      </view>

      <view v-if="orderInfo.paid == 1 && status.type == 3">
        <view class="wrapper" v-if="orderInfo.deliveryType === 'express'">
          <view class="item acea-row row-between">
            <view>配送方式：</view>
            <view class="conter">发货</view>
          </view>
          <view class="item acea-row row-between">
            <view>快递公司：</view>
            <view class="conter">{{ orderInfo.deliveryName || '' }}</view>
          </view>
          <view class="item acea-row row-between">
            <view>快递号：</view>
            <view class="conter">{{ orderInfo.deliveryId || '' }}</view>
          </view>
        </view>
        <view class="wrapper" v-else>
          <view class="item acea-row row-between">
            <view>配送方式：</view>
            <view class="conter">送货</view>
          </view>
          <view class="item acea-row row-between">
            <view>配送人：</view>
            <view class="conter">{{ orderInfo.deliveryName || '' }}</view>
          </view>
          <view class="item acea-row row-between">
            <view>配送电话：</view>
            <view class="conter acea-row row-middle row-right">
              {{ orderInfo.deliveryId || '' }}
              <text class="copy">拨打</text>
            </view>
          </view>
        </view>
      </view>
      <!--     退款订单详情 -->
      <view class="wrapper" v-if="refundOrder">
        <view class="item acea-row row-between">
          <view>收货人：</view>
          <view class="conter">{{ orderInfo.realName || '' }}</view>
        </view>
        <view class="item acea-row row-between">
          <view>联系电话：</view>
          <view class="conter">{{ orderInfo.userPhone || '' }}</view>
        </view>
        <view class="item acea-row row-between">
          <view>收货地址：</view>
          <view class="conter">{{ orderInfo.userAddress || '' }}</view>
        </view>
      </view>
      <!-- 		<view class="wrapper">
   			<view class="item acea-row row-between" v-if="!isIntegral">
   				<view>支付金额：</view>
   				<view class="conter">￥{{ orderInfo.totalPrice || 0 }}</view>
   			</view>
   			<view class="item acea-row row-between" v-if="isIntegral">
   				<view>支付积分：</view>
   				<view class="conter">{{ orderInfo.payIntegral || 0 }}积分</view>
   			</view>
   			<view class="item acea-row row-between" v-if="orderInfo.couponPrice > 0">
   				<view>优惠券抵扣：</view>
   				<view class="conter">-￥{{ orderInfo.couponPrice || 0 }}</view>
   			</view>
   			<view class="item acea-row row-between" v-if="orderInfo.useIntegral > 0">
   				<view>积分抵扣：</view>
   				<view class="conter">-￥{{ orderInfo.deductionPrice || 0 }}</view>
   			</view>
   			<view class="item acea-row row-between" v-if="orderInfo.payPostage > 0">
   				<view>运费：</view>
   				<view class="conter">￥{{ orderInfo.payPostage || 0 }}</view>
   			</view>
   			<view class="actualPay acea-row row-right">
   				实付款：
   				<text class="money font-color-red" v-if="!isIntegral">￥{{ orderInfo.payPrice || 0 }}</text>
   				<text class="money font-color-red" v-if="isIntegral">{{ orderInfo.payIntegral || 0 }}积分</text>
   			</view>
   		</view> -->

      <view
        class="refundRecord"
        v-if="
          (orderInfo.shippingType == 1 && status.type == 2) ||
          (orderInfo.shippingType == 1 && status.type == 4) ||
          (orderInfo.shippingType == 1 &&
            status.type == 3 &&
            orderInfo.deliveryType == 'express')
        "
        @click="
          $yrouter.push({
            path: '/packageShop/pages/order/Logistics/index',
            query: { id: orderInfo.orderId },
          })
        "
      >
        <view class="">查看物流</view>
        <view class="">
          <text class="look">查看</text>
          <u-icon
            name="arrow-right"
            class="iconRight"
            color="#999999"
            size="26rpx"
            style="margin-left: 16rpx"
          ></u-icon>
        </view>
      </view>

      <view style="height: 100rpx" v-if="!refundOrder && offlineStatus"></view>
      <view
        class="footer acea-row row-right row-middle footerNew"
        v-if="!refundOrder && offlineStatus"
      >
        <view class="service">
          <button open-type="contact" class="contacButton">
            <view class="item">
              <view class="iconfont icon-kefu"></view>
              <text class="name">联系客服</text>
            </view>
          </button>
        </view>

        <view class="acea-row row-right row-middle">
          <template v-if="status.type == 0">
            <view class="bnt cancel btnStyle1" @click="cancelOrder"
              >取消订单</view
            >
            <view class="bnt bg-color-red btnStyle2" @click="pay = true"
              >立即付款</view
            >
          </template>
          <template v-if="orderInfo.refundStatus === 0 && orderInfo.paid === 1">
            <view class="bnt cancel btnStyle1" @click="goGoodsReturn(orderInfo)"
              >申请售后</view
            >
          </template>
          <!--  -->
          <template v-if="orderInfo.shippingType == 1 && status.type == 2">
            <!-- 			<view
   						class="bnt default"
   						@click="
   							$yrouter.push({
   								path: '/packageShop/pages/order/Logistics/index',
   								query: {
   									id: orderInfo.orderId
   								}
   							})
   						"
   					>
   						查看物流
   					</view> -->
            <view class="bnt bg-color-red btnStyle1" @click="takeOrder"
              >确认收货</view
            >
          </template>
          <template
            v-if="
              orderInfo.shippingType == 1 &&
              status.type == 3 &&
              orderInfo.deliveryType == 'express'
            "
          >
            <!-- <view class="bnt default btnStyle1" @click="$yrouter.push({ path: '/packageShop/pages/order/Logistics/index', query: { id: orderInfo.orderId } })">
   						查看物流
   					</view> -->
          </template>
          <template v-if="orderInfo.shippingType == 1 && status.type == 4">
            <view class="bnt cancel btnStyle1" @click="delOrder">删除订单</view>
            <!-- 	<view class="bnt default" @click="$yrouter.push({ path: '/packageShop/pages/order/Logistics/index', query: { id: orderInfo.orderId } })">查看物流</view> -->
          </template>
          <template v-if="status.type == 6">
            <view
              class="bnt bg-color-red btnStyle1"
              @click="goGroupRule(orderInfo)"
              >查看拼团</view
            >
          </template>
        </view>
      </view>
      <Payment
        v-model="pay"
        :types="payType"
        @checked="toPay"
        :balance="userInfo.nowMoney"
      ></Payment>
      <view class="geoPage" v-if="mapShow">
        <iframe
          width="100%"
          height="100%"
          frameborder="0"
          scrolling="no"
          :src="
            'https://apis.map.qq.com/uri/v1/geocoder?coord=' +
            system_store.latitude +
            ',' +
            system_store.longitude +
            '&referer=' +
            mapKey
          "
        ></iframe>
      </view>
    </view>

    <u-loading-page :loading="loading"></u-loading-page>
  </view>
</template>

<script>
import dayjs from 'dayjs'
import OrderGoods from '@/components/OrderGoods'
import { orderDetail } from '@/api/order'
import Payment from '@/components/Payment'
import { isWeixin, copyClipboard } from '@/utils'
import { mapGetters } from 'vuex'
import {
  cancelOrderHandle,
  takeOrderHandle,
  delOrderHandle,
  payOrderHandle,
} from '@/libs/order'
// import { wechatEvevt } from "@/libs/wechat";

const NAME = 'OrderDetails'

export default {
  name: NAME,
  components: {
    OrderGoods,
    Payment,
  },
  data: function () {
    return {
      loading: true,
      timeData: {},
      offlinePayStatus: 2,
      orderTypeName: '普通订单',
      orderTypeNameStatus: true,
      offlineStatus: true,
      id: '',
      orderInfo: {
        _status: {},
      },
      status: {},
      pay: false,
      payType: ['yue', 'weixin'],
      from: this.$deviceType,
      system_store: {},
      mapKay: '',
      mapShow: false,
      isIntegral: false,
    }
  },
  computed: {
    refundOrder() {
      return this.orderInfo.refundStatus > 0
    },
    ...mapGetters(['userInfo']),
    countdownTime() {
      if (this.orderInfo._status._msg) {
        let time_str = this.orderInfo._status._msg
          .replace('请在', '')
          .replace('前完成支付', '')
        let time = dayjs(time_str).unix() - dayjs().unix()
        console.log(
          dayjs(time_str).unix(),
          dayjs().unix(),
          time,
          time_str,
          'time----------------------'
        )
        return time * 1000
      } else return 0
    },
  },
  onShow() {
    this.loading = true
    setTimeout(() => {
      this.loading = false
    }, 1000)
    this.id = this.$yroute.query.id
    this.getDetail()
  },
  mounted() {
    this.id = this.$yroute.query.id
  },
  methods: {
    copyClipboard,
    // 复制功能
    copy(value) {
      if (!value) return
      uni.setClipboardData({
        data: value,
        success() {
          uni.$u.toast('复制成功')
        },
        fail(err) {
          console.log(err)
        },
      })
    },
    discounts() {
      // 优惠券抵扣  +  积分抵扣
      return (
        (this.orderInfo.couponPrice ? this.orderInfo.couponPrice : 0) +
        (this.orderInfo.deductionPrice ? this.orderInfo.deductionPrice : 0)
      )
    },

    onChange(e) {
      this.timeData = e
    },
    // 申请退款
    goGoodsReturn(orderInfo) {
      this.$yrouter.push({
        path: '/packageShop/pages/order/GoodsReturn/index',
        query: {
          id: orderInfo.orderId,
        },
      })
    },
    goGroupRule(orderInfo) {
      this.$yrouter.push({
        path: '/packageShop/pages/activity/GroupRule/index',
        query: {
          id: orderInfo.pinkId,
        },
      })
    },
    //拨打电话
    telPhone(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber: phoneNumber,
        fail() {
          console.log('取消拨打')
        },
      })
    },
    showChang: function (data) {
      // 这里判断是不是微信小程序
      this.$yrouter.push({
        path: '/pages/map/index',
        query: data,
      })
      // if (isWeixin()) {
      //   let config = {
      //     latitude: this.system_store.latitude,
      //     longitude: this.system_store.longitude,
      //     name: this.system_store.name,
      //     address: this.system_store.address
      //   };
      // } else {
      //   if (!this.mapKey)
      //     uni.showToast({
      //       title: "暂无法使用查看地图，请配置您的腾讯地图key",
      //       icon: "none",
      //       duration: 2000
      //     });
      //   return;
      //   this.mapShow = true;
      // }
    },
    goBack() {
      if (this.name === 'MyOrder') {
        this.$yrouter.back()
        return
      } else {
        console.log(this)
        this.$yrouter.replace({
          path: '/packageShop/pages/order/MyOrder/index',
        })
        return
      }
    },
    cancelOrder() {
      cancelOrderHandle(this.orderInfo.orderId)
        .then(() => {
          setTimeout(() => this.goBack(), 300)
        })
        .catch(() => {
          this.getDetail()
        })
    },
    takeOrder() {
      takeOrderHandle(this.orderInfo.orderId).finally(() => {
        this.getDetail()
      })
    },
    delOrder() {
      delOrderHandle(this.orderInfo.orderId).then(() => {
        setTimeout(() => this.goBack(), 300)
      })
    },
    setOfflinePayStatus: function (status) {
      var that = this
      that.offlinePayStatus = status
      if (status === 1 && that.orderTypeNameStatus === true) {
        that.payType.push('offline')
      }
    },
    getOrderStatus: function () {
      let orderInfo = this.orderInfo || {},
        _status = orderInfo._status || {
          _type: 0,
        },
        status = {}
      let type = parseInt(_status._type),
        delivery_type = orderInfo.deliveryType,
        seckill_id = orderInfo.seckillId ? parseInt(orderInfo.seckillId) : 0,
        bargain_id = orderInfo.bargainId ? parseInt(orderInfo.bargainId) : 0,
        combination_id = orderInfo.combinationId
          ? parseInt(orderInfo.combinationId)
          : 0
      status = {
        type: type,
        class_status: 0,
      }
      if (type == 1 && combination_id > 0) {
        status.type = 6
        status.class_status = 1
      } //查看拼团
      if (type == 2 && delivery_type == 'express') status.class_status = 2 //查看物流
      if (type == 2) status.class_status = 3 //确认收货
      if (type == 4 || type === 0) status.class_status = 4 //删除订单
      if (
        !seckill_id &&
        !bargain_id &&
        !combination_id &&
        (type == 3 || type == 4)
      )
        status.class_status = 5 //再次购买
      if (type == 9) {
        //线下付款
        status.class_status = 0
        this.offlineStatus = false
      }
      this.status = status
    },
    getDetail() {
      const id = this.id
      if (!id) {
        uni.showToast({
          title: '订单不存在',
          icon: 'none',
          duration: 2000,
        })
        return
      }
      orderDetail(id)
        .then(res => {
          this.orderInfo = res.data
          console.log('dingdan', this.orderInfo)
          this.getOrderStatus()
          if (this.orderInfo.combinationId > 0) {
            this.orderTypeName = '拼团订单'
            this.orderTypeNameStatus = false
          } else if (this.orderInfo.bargainId > 0) {
            this.orderTypeName = '砍价订单'
            this.orderTypeNameStatus = false
          } else if (this.orderInfo.seckillId > 0) {
            this.orderTypeName = '秒杀订单'
            this.orderTypeNameStatus = false
          }
          this.isIntegral = res.data.payType == 'integral'
          if (this.isIntegral) {
            this.orderTypeName = '积分兑换订单'
            this.orderTypeNameStatus = false
          }

          this.system_store = res.data.systemStore || {}
          this.mapKey = res.data.mapKay
          this.setOfflinePayStatus(this.orderInfo.offlinePayStatus)
        })
        .catch(err => {
          uni.showToast({
            title: err.response.data.msg,
            icon: 'none',
            duration: 2000,
          })
        })
    },
    async toPay(type) {
      var that = this
      await payOrderHandle(this.orderInfo.orderId, type, that.from)
      that.getDetail()
    },
  },
}
</script>

<style scoped lang="less">
.geoPage {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 10000;
}

.order-details .writeOff {
  background-color: #fff;
  margin-top: 0.13 * 100rpx;
  padding-bottom: 0.3 * 100rpx;
}

.order-details .writeOff .title {
  font-size: 0.3 * 100rpx;
  color: #282828;
  height: 0.87 * 100rpx;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 0.3 * 100rpx;
  line-height: 0.87 * 100rpx;
}

.order-details .writeOff .grayBg {
  background-color: #f2f5f7;
  width: 5.9 * 100rpx;
  height: 3.84 * 100rpx;
  border-radius: 0.2 * 100rpx 0.2 * 100rpx 0 0;
  margin: 0.5 * 100rpx auto 0 auto;
  padding-top: 0.55 * 100rpx;
}

.order-details .writeOff .grayBg .pictrue {
  width: 2.9 * 100rpx;
  height: 2.9 * 100rpx;
  margin: 0 auto;
}

.order-details .writeOff .grayBg .pictrue img {
  width: 100%;
  height: 100%;
  display: block;
}

.order-details .writeOff .gear {
  width: 5.9 * 100rpx;
  height: 0.3 * 100rpx;
  margin: 0 auto;
}

.order-details .writeOff .gear img {
  width: 100%;
  height: 100%;
  display: block;
}

.order-details .writeOff .num {
  background-color: #f0c34c;
  width: 5.9 * 100rpx;
  height: 0.84 * 100rpx;
  color: #282828;
  font-size: 0.48 * 100rpx;
  margin: 0 auto;
  border-radius: 0 0 0.2 * 100rpx 0.2 * 100rpx;
  text-align: center;
  padding-top: 0.04 * 100rpx;
}

.order-details .writeOff .rules {
  margin: 0.46 * 100rpx 0.3 * 100rpx 0 0.3 * 100rpx;
  border-top: 0.01 * 100rpx solid #f0f0f0;
  padding-top: 0.1 * 100rpx;
}

.order-details .writeOff .rules .item {
  margin-top: 0.15 * 100rpx;
}

.order-details .writeOff .rules .item .rulesTitle {
  font-size: 0.28 * 100rpx;
  color: #282828;
}

.order-details .writeOff .rules .item .rulesTitle .iconfont {
  font-size: 0.3 * 100rpx;
  color: #333;
  margin-right: 0.08 * 100rpx;
  margin-top: 0.05 * 100rpx;
}

.order-details .writeOff .rules .item .info {
  font-size: 0.28 * 100rpx;
  color: #999;
  margin-top: 0.05 * 100rpx;
}

.order-details .writeOff .rules .item .info .time {
  margin-left: 0.2 * 100rpx;
}

.order-details .map {
  height: 0.86 * 100rpx;
  font-size: 0.3 * 100rpx;
  color: #282828;
  line-height: 0.86 * 100rpx;
  border-bottom: 0.01 * 100rpx solid #f0f0f0;
  margin-top: 0.13 * 100rpx;
  background-color: #fff;
  padding: 0 0.3 * 100rpx;
}

.order-details .map .place {
  font-size: 0.26 * 100rpx;
  width: 1.76 * 100rpx;
  height: 0.5 * 100rpx;
  border-radius: 0.25 * 100rpx;
  line-height: 0.5 * 100rpx;
  text-align: center;
}

.order-details .map .place .iconfont {
  font-size: 0.27 * 100rpx;
  height: 0.27 * 100rpx;
  line-height: 0.27 * 100rpx;
  margin: 0.02 * 100rpx 0.03 * 100rpx 0 0;
}

.order-details .address .name .iconfont {
  font-size: 0.34 * 100rpx;
  margin-left: 0.1 * 100rpx;
}
.order-details {
  padding-top: 16rpx;
  padding-bottom: 16rpx;
}

.shipments {
  margin-bottom: 16rpx;
  background-color: #fff;
  padding: 32rpx 24rpx;

  .shipments-1 {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 44rpx;
    margin-bottom: 8rpx;
  }

  .shipments-2 {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 36rpx;
  }
}
.address {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .address-left {
    margin-right: 24rpx;
  }
  .realName {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 44rpx;
  }
  .phone {
    margin-left: 8rpx !important;
    color: #666666 !important;
    font-size: 26rpx !important;
  }
}

.headerNew {
  margin-bottom: 16rpx;
  background-color: #fff !important;
  .state {
    font-size: 32rpx !important;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    line-height: 44rpx !important;
  }
  .data {
    margin-left: 0 !important;
  }
  .stateTwo {
    font-size: 26rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 36rpx;
  }
}

.payment {
  margin-top: 16rpx;
  margin-bottom: 24rpx;
  background-color: #fff;
  padding: 32rpx 24rpx;
  padding-bottom: 0;

  .title {
    margin-bottom: 24rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 44rpx;
  }

  .payment-1 {
    padding-bottom: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 40rpx;
    }

    .right {
      text:nth-child(1) {
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1a1a1a;
        line-height: 24rpx;
      }

      text:nth-child(2) {
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #1a1a1a;
        line-height: 40rpx;
      }
    }
  }

  .payment-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;

    .left {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .freight {
        width: 112rpx;
        display: flex;
        justify-content: space-between;

        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 40rpx;
      }

      .freightText {
        margin-left: 24rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 40rpx;
      }
    }

    .right {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 40rpx;
    }
  }
}

.orderInfo {
  margin-bottom: 24rpx;
  background-color: #fff;
  padding: 32rpx 24rpx;

  .title {
    margin-bottom: 24rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 44rpx;
  }

  .info {
    margin-bottom: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 40rpx;
    }

    .right {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 40rpx;

      text:nth-child(2) {
        margin-left: 16rpx;
        font-size: 26rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FF5900;
        line-height: 26rpx;
      }
    }
  }

  .info-bottom {
    margin-bottom: 24rpx !important;
  }
}
.btnStyle1 {
  font-weight: 400 !important;
  background-color: #fff !important;
  color: #1a1a1a !important;
  border: 2rpx solid #e6e6e6 !important;
  line-height: 54rpx !important;
  color: #666666 !important;
}
.btnStyle2 {
  font-weight: 400 !important;
  background-color: #fff !important;
  color: #FF5900 !important;
  border: 2rpx solid #FF5900 !important;
  line-height: 54rpx !important;
}

.service {
  .item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 70rpx;
    .icon-kefu {
      color: #FF5900;
      font-size: 36rpx;
    }
    .name {
      margin-left: 16rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 40rpx;
    }
  }
}
.footerNew {
  padding-top: 20rpx !important;
  justify-content: space-between !important;
  padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx) !important;
}

.conmmentStly {
}
.refundRecord {
  margin-top: 15rpx;
  padding: 20rpx 30rpx;
  background-color: #fff;

  height: 96rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  view:nth-child(1) {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 32rpx;
  }
  view:nth-child(2) {
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #999999;
    line-height: 32rpx;
  }
  .look {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 40rpx;
  }
  .iconRight {
    position: relative;
    top: 4rpx;
  }
}
</style>
